import React from "react";
import { AppstoreOutlined } from '@ant-design/icons';
import { Checkbox, Divider, Row, Col, Button } from 'antd';
import '../style.less'
import PropTypes from 'prop-types'
const CheckboxGroup = Checkbox.Group;
class TableColTools extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            checkedList: [],
            checkAll: true,
            show: false
        }
    }
    componentDidMount() {
        this.setState({
            checkedList: this.props.columns.map(item => {
                return item.dataIndex
            })
        })
        window.addEventListener('click', () => {
            this.setState({
                show: false
            })
        })

    }
    triggle = (e) => {

        this.setState({
            show: !this.state.show
        })
    }
    onChange = (list) => {
        this.setState({
            checkedList: list,
            checkAll: list.length === this.props.columns.length
        })
        this.props.checkTools(list)
    }
    onCheckAllChange = () => {
        let checkAll = this.state.checkAll
        let checkedList = this.props.columns.map(item => {
            return item.dataIndex
        })
        this.setState({
            checkAll: !checkAll,
            checkedList: !checkAll ? checkedList : []
        })
        this.props.checkTools(!checkAll ? checkedList : [])
    }
    click(e) {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    }
    render() {
        const { columns } = this.props

        const { plainOptions, checkedList, checkAll, show } = this.state
        return (
            <div className="TableColTools" onClick={this.click}>
                <Button shape={"circle"} icon={<AppstoreOutlined />} onClick={this.triggle}></Button>
                {show ? <div className="checkList">
                    <Checkbox style={{ paddingLeft: 10 }} onChange={this.onCheckAllChange} checked={checkAll}>
                        全选
                    </Checkbox>
                    <Divider style={{ marginTop: 10, marginBottom: 10 }} />
                    <Checkbox.Group
                        style={{
                            width: '100%', paddingLeft: 10
                        }}
                        value={checkedList}
                        onChange={this.onChange}
                    >
                        <Row>
                            {
                                columns.map(item => {
                                    return (
                                        <Col span={24}>
                                            <Checkbox value={item.dataIndex}>{item.title}</Checkbox>
                                        </Col>
                                    )
                                })
                            }
                        </Row>
                    </Checkbox.Group>
                </div> : null}
            </div>
        )
    }
}
TableColTools.propTypes = {
    columns: PropTypes.array,
    checkedList: PropTypes.array,
}
TableColTools.defaultProps = {
    columns: [],
    checkedList: []
}
export default TableColTools